<template>
  <div class="columns">
    <div class="column is-three-quarters" style="max-height: 600px;overflow:auto">
      <transition name="animate__animated animate__bounce"
                  enter-active-class="animate__fadeInLeft"
                  appear>
        <el-card shadow="never">
          <el-tabs v-model="activeName" type="card" >
            <el-tab-pane label="选词填空" name="first">
              <TestShow :title="item.title1" :answer="item.title1Ans"></TestShow>
            </el-tab-pane>
            <el-tab-pane label="完型填空" name="second">
              <TestShow :title="item.title2" :answer="item.title2Ans"></TestShow>
            </el-tab-pane>
            <el-tab-pane label="阅读理解1" name="third">
              <TestShow :title="item.title3" :answer="item.title3Ans"></TestShow>
            </el-tab-pane>
            <el-tab-pane label="阅读理解2" name="fourth">
              <TestShow :title="item.title4" :answer="item.title4Ans"></TestShow>
            </el-tab-pane>
          </el-tabs>
         </el-card>
      </transition>
    </div>
    <div class="column">
      <Collect></Collect>
    </div>
  </div>
</template>

<script>
import Collect from "./Collect";
import TestShow from "./Test-show";
export default {
  name: "Test-detail",
  components: {TestShow, Collect},
  data(){
    return{
      activeName:'first',
      item:JSON.parse(this.$route.params.item)
    }
  },


}
</script>

<style scoped>

</style>